<template>
    <div class="menu_box">
        <div class="top">
            <p class="pTitle">通知公告</p>
            <p class="pTip">根据规则填写内容</p>
            <img class="top_img" src="../../assets/noticeMenu_icon.png" alt="">
        </div>
        <div class="main">
            <div class="main_li flex" :class="{ 'active': item.path == defaultPath }" v-for="item in list"
                :key="item.id" @click="goTarget(item)">
                <div class="flex">
                    <Icon :iconName="item.icon" />
                    <p>{{ item.label }}</p>
                </div>
                <!-- <div class="unread">2条未读</div> -->
                <!-- <div class="circle">9</div> -->
            </div>
        </div>
        <button class="btn" @click="goTarget(publish)">{{ publish.label }}</button>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, } from "element-plus";
import { mapState, mapActions } from 'vuex';
import Icon from '@/components/Icon.vue';
import {
    Location,
    Document,
} from "@element-plus/icons-vue";

export default {
    name: "Header",
    data() {
        return {
            isCollapse: false,
            list: [],
            flagId: 1,
            publish: {},
            defaultPath1: '',
        };
    },

    components: {
        Location,
        Document, Icon,
    },
    computed: {
        ...mapState(['navMenuList', 'isCollapse1', 'defaultPath']),
        isCollapse() {
            return this.isCollapse1
        },
        // defaultPath1() {
        //     console.log(123,this.defaultPath)
        //     return this.defaultPath
        // },
    },
    mounted() {
        this.getTreeData();
    },
    methods: {
        ...mapActions(['uploadAdd']),
        addPathHandle(data) {
            this.uploadAdd(data)
        },
        openOrClose() {
            if (this.isCollapse) {
                this.isCollapse = false;
            } else {
                this.isCollapse = true;
            }
        },
        goTarget(data) {
            this.uploadAdd(data)
            this.$router.push({
                path: data.path
            })
        },
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6020" }, "get").then((data) => {
                this.list = data[0].children;
                this.publish = this.list.filter(item => item.label == "通知发布")[0]
                this.list = this.list.filter(item => item.label != "通知发布")
                // console.log(1000, this.list);
                // console.log(1111, this.publish);
            });
        },

        getlistAll(id) {//获取未读人员明细
            httpService("/javaApi/messageViews/listAll", { "messageId": id }, "get").then((data) => {
                // console.log(1000, this.list); 
            });
        },

    },
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.menu_box {
    position: relative;
    width: 230px;
    height: 402px;
    background-color: #fff;
    margin-top: 80px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

}

.top {
    height: 72px;
    background-color: brown;
    background: url(../../assets/noticeMenu_bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    color: #fff;
}

.pTitle {
    font-size: 16px;
    padding: 15px 0 0 20px;
}

.pTip {
    font-size: 12px;
    padding: 5px 0 0 20px;
}

.top_img {
    position: absolute;
    right: 20px;
    bottom: -4px;
}

.main {
    height: 330px;
    /* background-color: blueviolet; */
    margin-top: 20px;
}

.flex {
    display: flex;
    align-items: center;
}

.main_li {
    justify-content: space-between;
    height: 46px;
    padding: 0 15px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.main_li img {
    width: 20px;
    margin-right: 10px;
}

.unread {
    color: #0095FF;
    font-size: 12px;
}

.btn {
    position: absolute;
    width: calc(100% - 30px);
    bottom: 34px;
    left: 15px;
    border: none;
    background-color: #007EFF;
    border-radius: 5px;
    height: 40px;
    color: #fff;
    cursor: pointer;
}

.active {
    background-color: #007EFF !important;
    color: #fff !important;
}

.active .unread {
    color: #fff !important;
}

.circle {
    min-width: 10px;
    height: 10px;
    background-color: rgb(255, 68, 68);
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    line-height: 10px;
    color: #fff;
    padding: 5px
}
</style>